<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="title"/>
    <input type="text" v-model="child.someStr">
    <p v-class="className" class="abc">
        {{title}}<span v-text="child.someStr"></span>
    </p>
    <p v-text="textStr"></p>
    <p v-html="htmlStr"></p>
    <button v-on:click="clickBtn">Reset</button>
</div>

<script src="./js/Observer.js"></script>
<script src="./js/Watcher.js"></script>
<script src="./js/Directive.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#app',
        data: {
            title: 'Hello ',
            className: 'btn',
            textStr: '<span style="color: #f00;">red</span>',
            htmlStr: '<span style="color: #f00;">red</span>',
            child: {
                someStr: 'World!'
            }
        },
        methods: {
            clickBtn: function(e) {
                this.title = "Hello ";
                this.child.someStr = "World!";
            }
        }
    });
</script>

</body>
</html>